<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>输血管理系统</title>
    <link rel="shortcut icon" type="image/x-icon" href="../img/favicon.ico">
    <link rel="stylesheet" href="../../element-theme/blue/index.css">
</head>

<body>
    <div class="data-manage-table">
        <template>
            <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;">
                <!-- <el-button type="primary" style="margin-right: 40px;">批量删除</el-button> -->
                <el-form-item label="样本编号">
                    <el-input placeholder="请输入样品编号" v-model="searchSample.A_blood_sample_number"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchSample.state">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="操作人">
                    <el-input placeholder="请输入操作人姓名" v-model="searchSample.Operation_of"></el-input>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker v-model="searchSample.dateVal" type="daterange" size="small" format="yyyy-MM-dd"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">搜索</el-button>
                    <el-button type="info">清空</el-button>
                    <el-button type="" @click="dialogVisible = true">登记</el-button>
                    <el-button type="">导出</el-button>
                    <el-button type="">打印</el-button>
                </el-form-item>
            </el-form>

            <el-dialog title="添加样本" center :visible.sync="dialogVisible" width="45%" @close="cancel">
                <!-- 内容的主体区域 -->
                <el-form ref="form" :model="addForm" :rules="addFormRules" label-width="100px">
                    <el-form-item label="样本编号" prop="A_blood_sample_number">
                        <el-input v-model="addForm.A_blood_sample_number"></el-input>
                    </el-form-item>
                    <el-form-item label="血液编号" prop="Blood_number">
                        <el-input v-model="addForm.Blood_number"></el-input>
                    </el-form-item>
                    <el-form-item label="样本状态" prop="state">
                        <el-select v-model="addForm.state">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="样本位置" prop="The_sample_location">
                        <el-select v-model="addForm.The_sample_location">
                            <el-option v-for="item in location" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="操作人" prop="Operation_of">
                        <el-input v-model="addForm.Operation_of"></el-input>
                    </el-form-item>
                    <el-form-item label="操作人工号" prop="Operating_manual">
                        <el-input v-model="addForm.Operating_manual"></el-input>
                    </el-form-item>
                </el-form>
                <!-- 底部区域 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancel()">取 消</el-button>
                    <el-button type="primary" @click="">确 定</el-button>
                </span>
            </el-dialog>

            <el-table :data="tableData" style="width: 100%" border
                :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                @current-change="">
                <el-table-column type="selection" width="55" align="center"></el-table-column>

                <el-table-column prop="A_blood_sample_number" label="血液样本编号" width="100" align="center">
                </el-table-column>

                <el-table-column prop="Blood_number" label="血液编号" width="180" align="center">
                </el-table-column>

                <el-table-column label="采集日期" width="180" align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{scope.row.Acquisition_date}}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="state" label="状态" width="180" align="center">
                </el-table-column>

                <el-table-column prop="The_sample_location" label="样本位置" width="180" align="center">
                </el-table-column>

                <el-table-column prop="Operation_of" label="操作人" width="100" align="center">
                </el-table-column>

                <el-table-column prop="Operating_manual" label="操作人工号" width="130" align="center">
                </el-table-column>

                <el-table-column label="操作" width="240" align="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="handleEdit(scope.$index, scope.row)">签收</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">出库
                        </el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">遗弃
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination :page-size="10" :total="300" :current-page="5" layout="prev, pager, next, jumper"
                class="pagination" @current-change="" style="text-align: center; margin-top: 20px;" />
        </template>
    </div>

    <script src="../../temp/vue-2.5.17/vue.js"></script>
    <script src="../../temp/element-2.4.5/index.js"></script>
    <script src="../../icons/iconfont.js"></script>
    <script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
    <script>
        (function () {
            var vm = window.vm = new Vue({
                el: '.data-manage-table',
                data() {
                    return {
                        //样本状态选择
                        options: [{
                            value: '选项1',
                            label: '待签收'
                        }, {
                            value: '选项2',
                            label: '已签收'
                        }, {
                            value: '选项3',
                            label: '已出库'
                        }, {
                            value: '选项4',
                            label: '已遗弃'
                        }],

                        //样本位置
                        location: [{
                            value: '选项1',
                            label: '检验科'
                        }, {
                            value: '选项2',
                            label: '输血科'
                        }],

                        //弹出框显示
                        dialogVisible: false,

                        //搜索样本信息
                        searchSample: {
                            A_blood_sample_number: '',  //编号
                            state: '',  //状态
                            Operation_of: '',   //操作员
                            dateVal: '',    //日期范围
                        },

                        //表格信息
                        tableData: [
                            {
                                A_blood_sample_number: '001',
                                Blood_number: '0x001',
                                Acquisition_date: '2016-05-02',
                                state: '等待处理',
                                The_sample_location: '检验科',
                                Operation_of: '张三',
                                Operating_manual: '201033434'
                            },
                            {
                                A_blood_sample_number: '002',
                                Blood_number: '0x002',
                                Acquisition_date: '2016-05-03',
                                state: '等待处理',
                                The_sample_location: '检验科',
                                Operation_of: '张三',
                                Operating_manual: '201033434'
                            },
                            {
                                A_blood_sample_number: '003',
                                Blood_number: '0x003',
                                Acquisition_date: '2016-05-04',
                                state: '等待处理',
                                The_sample_location: '检验科',
                                Operation_of: '张三',
                                Operating_manual: '201033434'
                            },
                            {
                                A_blood_sample_number: '004',
                                Blood_number: '0x004',
                                Acquisition_date: '2016-05-05',
                                state: '等待处理',
                                The_sample_location: '检验科',
                                Operation_of: '张三',
                                Operating_manual: '201033434'
                            },
                            {
                                A_blood_sample_number: '001',
                                Blood_number: '0x001',
                                Acquisition_date: '2016-05-02',
                                state: '等待处理',
                                The_sample_location: '检验科',
                                Operation_of: '张三',
                                Operating_manual: '201033434'
                            },
                            {
                                A_blood_sample_number: '002',
                                Blood_number: '0x002',
                                Acquisition_date: '2016-05-03',
                                state: '等待处理',
                                The_sample_location: '检验科',
                                Operation_of: '张三',
                                Operating_manual: '201033434'
                            },
                            {
                                A_blood_sample_number: '003',
                                Blood_number: '0x003',
                                Acquisition_date: '2016-05-04',
                                state: '等待处理',
                                The_sample_location: '检验科',
                                Operation_of: '张三',
                                Operating_manual: '201033434'
                            },
                            {
                                A_blood_sample_number: '004',
                                Blood_number: '0x004',
                                Acquisition_date: '2016-05-05',
                                state: '等待处理',
                                The_sample_location: '检验科',
                                Operation_of: '张三',
                                Operating_manual: '201033434'
                            }
                        ],

                        //新增样本信息
                        addForm: {
                            A_blood_sample_number: '',
                            Blood_number: '',
                            state: '',
                            The_sample_location: '',
                            Operation_of: '',
                            Operating_manual: ''
                        },

                        //新增样本表单验证
                        addFormRules: {
                            A_blood_sample_number: [
                                { required: true, message: '请输入样本编号', trigger: 'blur' },
                            ],
                            Blood_number: [
                                { required: true, message: '请输入血液编号', trigger: 'blur' },
                            ],
                            state: [
                                { required: true, message: '请选择样本状态', trigger: 'change' },
                            ],
                            The_sample_location: [
                                { required: true, message: '请选择样本位置', trigger: 'change' },
                            ],
                            Operation_of: [
                                { required: true, message: '请输入操作人', trigger: 'blur' },
                            ],
                            Operating_manual: [
                                { required: true, message: '请输入操作人工号', trigger: 'blur' },
                            ]
                        }
                    }
                },

                methods: {
                    handleEdit(index, row) {
                        console.log(index, row);
                    },
                    handleDelete(index, row) {
                        console.log(index, row);
                    },
                    //取消按钮
                    cancel(){
                        this.addForm.A_blood_sample_number = ''
                        this.addForm.Blood_number = ''
                        this.addForm.state = ''
                        this.addForm.The_sample_location = ''
                        this.addForm.Operation_of = ''
                        this.addForm.Operating_manual = ''
                        this.dialogVisible = false
                    }
                }

            });
        })()
    </script>

</body>

</html>